<template>
  <transition name="fade" mode="out-in" appear>
    <div id="container" class="container">
      <a-spin :loading="loading" style="width: 100%">
        <a-card class="general-card">
          <div v-if="webSiteTypeModel && webSiteTypeModel.length > 0">
            <a-row
              v-for="webSiteType in webSiteTypeModel"
              :id="webSiteType.name"
              :key="webSiteType.name"
              style="padding: 10px 10px 10px 10px"
            >
              <a-space>
                <arco-icon :icon="webSiteType.icon" />
                <a-typography-text bold>
                  {{ $t(webSiteType.locale) }}
                </a-typography-text>
              </a-space>

              <a-divider style="margin-top: 0" />

              <a-col :span="24">
                <a-row :gutter="12">
                  <a-col
                    v-for="(webSiteUrl, index) in webSiteUrlModel[
                      webSiteType.name
                    ]"
                    :key="webSiteUrl.title"
                    :span="4"
                    :class="index >= 6 ? 'col' : ''"
                  >
                    <a-card
                      hoverable
                      size="small"
                      :body-style="cardBodyStyle"
                      @click="cardClick(webSiteUrl.url)"
                    >
                      <a-space :size="15">
                        <icon-font
                          v-if="webSiteUrl.icon"
                          :type="webSiteUrl.icon"
                          :size="40"
                        />

                        <a-avatar
                          v-else
                          :style="{ backgroundColor: '#ffffff' }"
                        >
                          <img
                            alt="avatar"
                            :src="webSiteUrl.image"
                            width="40"
                          />
                        </a-avatar>

                        <a-space direction="vertical">
                          <a-typography-text
                            bold
                            style="padding: 10px 0px 0px 0px"
                          >
                            {{ webSiteUrl.title }}
                          </a-typography-text>

                          <a-tooltip :content="webSiteUrl.desc">
                            <a-typography-text type="secondary" ellipsis>
                              {{ webSiteUrl.desc }}
                            </a-typography-text>
                          </a-tooltip>
                        </a-space>
                      </a-space>
                    </a-card>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>

          <a-result v-else status="404">
            <template #extra>
              <a-space>
                <a-button type="primary" @click="clearSearchData">{{
                  $t('not.found.back')
                }}</a-button>
              </a-space>
            </template>
          </a-result>
        </a-card>
      </a-spin>
    </div>
  </transition>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import {
    webSiteTypeData,
    webSiteUrlData,
    WebSiteType,
    WebSiteUrl,
  } from '@/data';
  import useLoading from '@/hooks/loading';
  import { useRoute } from 'vue-router';
  import { openWindow } from '@/utils';
  import { useAppStore } from '@/store';

  const route = useRoute();

  const appStore = useAppStore();

  const { loading, setLoading } = useLoading(false);

  const webSiteTypeModel = ref<WebSiteType[]>(webSiteTypeData());

  const webSiteUrlModel = ref(webSiteUrlData());

  const cardBodyStyle = ref({
    padding: '0px 5px 5px 5px',
  });

  const cardClick = (url: string) => {
    openWindow(url);
  };

  const clearSearchData = () => {
    appStore.toggleSearchData('');
  };

  watch(
    () => route.hash,
    (newHash) => {
      if (newHash) {
        const targetEl = document.querySelector(decodeURI(newHash));
        if (targetEl) {
          targetEl.scrollIntoView({
            behavior: 'smooth',
            block: 'center',
          });
        }
      }
    },
    { immediate: true }
  );

  watch(
    () => appStore.searchData,
    (searchData) => {
      // 过滤
      setLoading(true);
      try {
        if (searchData) {
          const webSiteUrlJson = webSiteUrlData();
          const webSiteUrlFilterData: any = {};
          Object.keys(webSiteUrlJson).forEach((webSiteType: any) => {
            const webSiteList: WebSiteUrl[] = (
              webSiteUrlJson[webSiteType] as WebSiteUrl[]
            ).filter(
              (webSiteUrl: WebSiteUrl) =>
                webSiteUrl.url
                  .toLowerCase()
                  .includes(searchData.toLowerCase()) ||
                webSiteUrl.title
                  .toLowerCase()
                  .includes(searchData.toLowerCase()) ||
                webSiteUrl.desc.toLowerCase().includes(searchData.toLowerCase())
            );
            if (webSiteList && webSiteList.length > 0) {
              webSiteUrlFilterData[webSiteType] = webSiteList;
            }
          });
          webSiteUrlModel.value = webSiteUrlFilterData;
          webSiteTypeModel.value = webSiteTypeData().filter((webSiteType) =>
            Object.keys(webSiteUrlFilterData).includes(webSiteType.name)
          );
        } else {
          webSiteUrlModel.value = webSiteUrlData();
          webSiteTypeModel.value = webSiteTypeData();
        }
      } catch (error) {
        // error
      } finally {
        setLoading(false);
      }
    }
  );
</script>

<style scoped lang="less">
  .container {
    padding: 20px 20px 20px 20px;
  }
  .col {
    padding: 10px 0px 0px 0px;
  }
</style>
